
<template>
  <div class="flex items-center p-4 border-b border-gray-100 active:bg-gray-50">
    <img 
      :src="contact.avatar" 
      :alt="contact.nickname"
      class="w-12 h-12 rounded"
    >
    <div class="flex-1 ml-3">
      <h3 class="font-medium text-gray-900">{{ contact.nickname }}</h3>
      <p v-if="contact.signature" class="text-sm text-gray-600">{{ contact.signature }}</p>
    </div>
    <i v-if="contact.isStarred" class="fas fa-star text-yellow-500 text-sm"></i>
  </div>
</template>

<script setup lang="ts">
import type { Contact } from '@/types'

defineProps<{
  contact: Contact
}>()

defineEmits<{
  click: [contact: Contact]
}>()
</script>
